<template>
	<!-- chartGPT -->
	<view style="background-color: #f7f7f7;" class="chart">
		<uni-nav-bar left-icon="back" :border="false" :fixed="true" @clickLeft="backFn" :statusBar="true" height="88rpx" >
			<view class=" line_middle">
				<view  :class="type==0 ? 'line_select' :'line'"  @click="secectFn(0)">AI对话</view>
				<view   :class="type==1 ? 'line_select' :'line'" @click="secectFn(1)">AI绘图</view>
				<view   :class="type==2 ? 'line_select' :'line'" @click="secectFn(2)">AI工具</view>
			</view>
			
		</uni-nav-bar>
    
		
		<view class="infoHeader" v-if="showType==true ">
			<view style="text-align: center;" v-if=" type==0 ">
				<image class="appIocn" @click="addChartInfo" src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/farword/dzclogo.png"></image>
				<view class="icontitle">您可以尝试一下问题</view>
				<view class="chartInfo" @click="addChartInfo(item)"  v-for="(item,index) in chartList" :key="index">{{item.value}}</view>
			</view>
			<view style="text-align: center;" v-if="type==1">
				<image class="appIocn" @click="addChartInfo" src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/farword/dzclogo.png"></image>
				<view class="icontitle">您可以尝试一下问题</view>
				<view class="chartInfo" @click="addChartInfo(item)"  v-for="(item,index) in chartList2" :key="index">{{item.value}}</view>
			</view>
		</view>
		
		<view class="infolist" v-if="type==0">
			<scroll-view scroll-y="true"  :style="{height: height +'px'} "  >
				<view v-for="(item,index) in list" :key="index" class="info_item">
					<view class="left_flex " v-if="item.type==0">
						<image class="avatarImage" src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/farword/dzclogo.png"></image>
						<view class="info">{{item.value}}</view>
					</view>
					
					<view class="right_flex " v-if="item.type==1">
						<view class="info">{{item.value}}</view>
						<image class="avatarImage" :src="avatar"></image>
					</view>
				</view>
				<view class="left_flex2 " v-if="isShow==true" >
					<image class="avatarImage" src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/farword/dzclogo.png"></image>
					<view class="loading2">。。。</view>
				</view>
			</scroll-view>
			
		</view>
		<view  class="infolist" v-if="type==1">
			<scroll-view scroll-y="true"  :style="{height: height +'px'} "   >
			<view v-for="(item,index) in list2" :key="index" class="info_item">
				<view class="left_flex " v-if="item.type==0">
					<image class="avatarImage" src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/farword/dzclogo.png"></image>
					<view class="info">
						<image @click="showImage(item.value)" class="info" style="width: 300rpx;"   :src="item.value" :lazy-load="true" mode="widthFix"></image>
					</view>
				</view>
				
				<view class="right_flex " v-if="item.type==1">
					<view class="info">{{item.value}}</view>
					<image class="avatarImage" :src="avatar"></image>
				</view>
			</view>
			<view class="left_flex2 " v-if="isShow==true" >
				<image class="avatarImage" src="https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/farword/dzclogo.png"></image>
				<view class="loading2">。。。</view>
			</view>
			</scroll-view>
		</view>
		
		<view class="input_button flex2" :style="'bottom:'+boardHeight+'px'"  v-if="(type==0 || type==1) && imageShow==false" >
			<input v-model="value"
			  @focus="inputBindFocus" 
			  @blur="inputBindBlur"
			 :adjust-position="false"  class="input" placeholder="请输入内容" placeholder-class="placeholder" />
			<view class="sending" @click="submit()">发送</view>
		</view>
		
		<view class="tool" v-if="type==2 ">
			<!--" -->
			<view class="tool_item"  @click="natTo" v-for="(item,index) in toolList" :key="index">
				<image class="tool_icon" :src="item.url" mode="widthFix"></image>
				<view class="tool_label">{{item.name}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		
		data(){
			return{
				list:[],
				list2:[],
				value:'',
				boardHeight:2,
				avatar:'',
				formData:{
					askStr: "",
				},
				isShow:false,
				type:0,
				showType:true,
				imageShow:false,
				height:'',
				chartList:[
					{value:'请帮我创作10条营销标题'},
					{value:'请帮我撰写一片营销文案'},
					{value:'请帮我策划一个除湿营销方案'},
				],
				chartList2:[
					{value:'牧羊犬图片'},
					{value:'黑猫警长'},
					{value:'小猪佩奇'},
				],
				toolList:[
					{url:'https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/farword/xiaohongshu.png',name:'小红书'},
					{url:'https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/farword/douyin.png',name:'抖音'},
					{url:'https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/farword/weibo.png',name:'微博'},
					{url:'https://sy-hws-file-oss.oss-cn-beijing.aliyuncs.com/farword/pengyouquan.png',name:'朋友圈'},
				]
			}
			
		},
		onLoad(){
			// console.log(this.$store.state);
			// this.avatar=this.$store.state.vuex_user.avatar
			this.height = uni.getSystemInfoSync().windowHeight-110;
			console.log(this.height);
			// uni.getSystemInfo({
			// 	success: function (res) {
			// 		console.log(res)
			// 	}
			// });
			this.avatar=this.$store.state.userCenterData.memberAvatar
			console.log(this.$store.state.userCenterData.memberAvatar);

		},
		created() {
	
		},
		methods:{
			backFn(){
				uni.navigateBack({delta:1})
			},
			natTo(){
				uni.navigateTo({
					url:'/standard/chartGPT/tooledit'
				})
			},
			// 图片预览
				showImage(val){
					const _this=this
						let arry=[]
						arry.push(val)
						// val.forEach(item=>{
						// 	if(item.url){
						// 		arry.push(item.url)
						// 	}
						// })
							uni.previewImage({
								urls:arry,//图片数组
								current:arry[0]
							})
							
						},
						
		   
			secectFn(e){
				this.type=e
				this.list=[]
			},
			addChartInfo(item){
				// console.log(item);
				// console.log('112');
				this.value=item.value
			},
			inputBindFocus(){
				const that=this
				uni.onKeyboardHeightChange((res)=>{
				        console.log(res)
						if(res.height){
							that.$nextTick(()=>{
							  that.boardHeight=res.height
							})
						}
			           
				 })
				// this.boardHeight=280
				// this.$refs.ygcComment.toggleMask('show')
			},
			inputBindBlur(){
					 this.boardHeight=0
			},
			submit(){
				const _this=this
				this.showType=false
				setTimeout(()=>{
					this.isShow=true
				},300)
				
				
				this.formData.askStr=this.value
				console.log(`"${this.value}"`);
				if(this.type==0){
					this.list.push({
						avatar:this.avatar,
						value:this.value,
						type:1
					})
					let param = {}
					param.url = 'v3/openai/front/chartGpt/xf/question'
					param.method = 'POST'
					param.header={
									  'Content-Type': 'application/json'
									}
					param.data = {
						askStr:`"${this.value}"`
					}
					this.value=''
					this.$request(param).then(res=>{
							 console.log(res);
							 if(res.msg){
								 _this.isShow=false
								 _this.list.push({
								 		avatar:_this.avatar,
								 		value:res.msg,
								 		type:0
								 	})		
							 }else if(res.errMsg=="request:fail timeout"){
								 uni.showToast({
								 	icon:'none',
									title:'请求失败'
								 })
								 _this.isShow=false
								 _this.list.push({
								 		avatar:_this.avatar,
								 		value:'请求失败',
								 		type:0
								 	})	
							 }else if(res.msg=='请登录'){
								 uni.showToast({
								 	icon:'none',
									title:res.msg,
								 })
							 }
								
					})
					// this.$u.api.chart(this.formData).then(res=>{
					// 	 console.log(res);
					// 	 if(res.code==0){
					// 		 _this.isShow=false
					// 		_this.list.push({
					// 				avatar:_this.avatar,
					// 				value:res.data,
					// 				type:0
					// 			})
					// 	 }
					// })
				}else{
					this.list2.push({
						avatar:this.avatar,
						value:this.value,
						type:1
					})
					console.log(this.list2);
					let param = {}
					param.url = 'v3/openai/front/chartGpt/xf/image'
					param.method = 'POST'
					param.header={
									  'Content-Type': 'application/json'
									}
					param.data = {
						askStr:`${this.value}`
					}
					this.value=''
					this.$request(param).then(res=>{
							 console.log(res);
							 if(res.msg){
								 _this.isShow=false
								 _this.list2.push({
								 		avatar:_this.avatar,
								 		value:res.msg,
								 		type:0
								 	})	
										console.log(_this.list2,'shju');
							 }else if(res.errMsg=="request:fail timeout"){
								 uni.showToast({
								 	icon:'none',
									title:'请求失败'
								 })
								 _this.isShow=false
								 _this.list.push({
								 		avatar:_this.avatar,
								 		value:'请求失败',
								 		type:0
								 	})	
							 }
								
					})
					// this.$u.api.chartImage(this.formData).then(res=>{
					// 	console.log(res);
					// 	console.log(res);
					// 	if(res.code==0){
					// 		 _this.isShow=false
					// 		_this.list.push({
					// 				avatar:_this.avatar,
					// 				value:res.data,
					// 				type:0
					// 			})
					// 	}
					// })
				}
				
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.chart{
		padding-top:100rpx;
		height: 100vh;
	}
	.circle{
		width: 60rpx;
		height: 60rpx;
		background-color: #f5f1ff;
		border-radius: 50%;
	}
	
	.infoHeader{
		position: absolute;
		top:25%;
		left: 50%;
		transform:translateX(-50%);
		z-index: 999;
	}
	.appIocn{
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
	}
	.icontitle{
		font-size: 20rpx ;
		font-weight: 700;
		margin-top: 10rpx;
	}
	.chartInfo{
		background-color: #fff;
		padding:25rpx 30rpx;
		margin: 20rpx 0;
		font-size: 26rpx;
		border-radius: 30rpx;
	}
	.line_middle{
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		font-size: 34rpx;
		font-weight: 700;
		color: #000;
	}
	.line_select{
		color: #677ded;
	}
	
	.input_button{
		width: 100%;
		padding: 20rpx 30rpx;
		position: fixed;
		// bottom: 278px;
		bottom: 0;
		left: 0;
		background-color: #fff;
		z-index: 9999;
	}
	.placeholder{
		font-size: 28rpx;
	}
		
	.input{
		padding: 15rpx 20rpx;
		background-color: #fff;
		width: 75%;
		height: 2.5rem;
		border: 2rpx solid #eee;
		border-radius: 15rpx;
	}
	.sending{
		background-color: #677ded;
		color: #fff;
		padding: 10rpx 20rpx;
		border-radius: 10rpx;
	}
	.avatarImage{
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin: 0 20rpx;
	}
	.infolist{
		margin: 20rpx 30rpx;
	}
	.info{
		background-color: #fff;
		padding: 20rpx;
		border-radius: 20rpx;
		max-width: 450rpx;
	}
	.info_item{
		padding: 20rpx 0;
	}
		
	.left_flex{
		display: flex;
	}
	.right_flex{
		display: flex;
		justify-content: flex-end;
	}
		
	.left_flex2{
		display: flex;
		align-items: center;
	}
	
	.loading2{
		font-size: 28rpx;
		color:#000;
		border: 2rpx solid #eee;
		border-radius: 15rpx;
		background-color: #fff;
		padding: 10rpx  20rpx  0 20rpx ;
		padding-bottom: 30rpx;
	}
	
	// AI工具
	
   ::v-deep .infoHeader{
		height: 0;
	}
	.tool{
		margin: 24rpx 30rpx;
		padding: 20rpx;
		border-radius: 6rpx;
		background-color: #fff;
		
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start
	}
	.tool_item{
		width: 33.3%;
		padding: 30rpx 0;
		// background-color: red;
		text-align: center;
	}
	
	.tool_icon{
		width: 80rpx;
	}
	.tool_label{
		margin-top: 10rpx;
		font-size: 26rpx
	}
</style>